<template>
  <div class="search-container">
    <a-tabs type="card-gutter" default-active-key="byTime">
      <a-tab-pane v-for="item of tabs" :key="item.key" :title="item.title">
        <component :is="item.component" :height="height" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import buy from './components/buy.vue'
import sell from './components/sell.vue'
import byTime from './components/byTime.vue'
import order from './components/order.vue'
import setting from './components/setting.vue'
import battleCount from './components/battleCount.vue'
import searchPet from './components/searchPet.vue'
import { ref, onMounted, onUnmounted } from 'vue'

defineOptions({
  name: 'Search',
  components: {
    buy,
    sell,
    byTime,
    order,
    setting,
    battleCount,
    searchPet,
  },
})
const height = ref(400)
const tabs = ref([
  {
    key: 'byTime',
    title: '按时间',
    component: 'byTime',
  },
  {
    key: 'buy',
    title: '买入',
    component: 'buy',
  },
  {
    key: 'sell',
    title: '卖出',
    component: 'sell',
  },
  {
    key: 'order',
    title: '订单',
    component: 'order',
  },
  {
    key: 'battleCount',
    title: '对战次数',
    component: 'battleCount',
  },
  {
    key: 'searchPet',
    title: '宠物',
    component: 'searchPet',
  },
  {
    key: 'setting',
    title: '设置',
    component: 'setting',
  },
])
const resize = () => {
  height.value = window.innerHeight - 40 - 32 - 16 - 40 - 100
}
onMounted(() => {
  resize()
  window.addEventListener('resize', resize)
  console.log(height.value)
})
onUnmounted(() => {
  window.removeEventListener('resize', resize)
})
</script>

<style scoped lang="scss">
.search-container {
  padding: 20px;
}
</style>
